<template>
  <el-container>
    <el-header height="60px">
      <header-contain>
        <a href="#" slot="log">
          <img src="/static/imgs/log.png" height="60" width="180" >
        </a>
        <header-menu slot="menu"></header-menu>
        <!--        <header-el-menu slot="menu"></header-el-menu>-->
        <header-user slot="myUser"></header-user>
      </header-contain>
    </el-header>
    <header-el-menu></header-el-menu>
    <div class="detailMain">
      <div class="right">
        <my-index-usershow slot="userShow" :usershow="this.userShow"></my-index-usershow>
      </div>
      <div class="left">
        <el-breadcrumb class="myBreadcrumb" separator="/">
          <el-breadcrumb-item :to="{ path: '/blogs' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,id) in breadcrumb" :key="id">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="blogContain">
          <h2 style="margin-bottom: 5px;font-size: 40px; font-weight: 200; ">{{ blog.title }}</h2>
          <div class="detail">
            <div class="time">{{ blog.time }} &nbsp author:{{blog.author}}</div>
            <div class="category">
              <el-link type="danger" :underline="false">{{ blog.category }}</el-link>
            </div>
          </div>
          <div v-html="blog.text">

          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import headerContain from "../../components/content/header/headerContain";
import headerUser from "../../components/content/header/headerUser";
import headerMenu from "../../components/content/header/headerMenu";
import headerElMenu from "../../components/content/header/headerElMenu";
import myIndexUsershow from "../../components/content/main/myIndexUsershow";
import myDetailNewshow from "../../components/content/blogdetail/myDetailNewshow";
import {getBlogText, getHomeMultidate} from "../../netword/home";

export default {
  name: "oneBlogDetail",
  components: {
    headerContain,headerUser,headerMenu,headerElMenu,myIndexUsershow,myDetailNewshow
  },
  data() {
    return {
      userShow: null,
      breadcrumb: ["Java","Spring"],
      blog: null
    }
  },
  created() {
    //1、请求多个数据
    getHomeMultidate().then(res => {
      this.userShow = res.dependencies.usershow;
    });
    getBlogText().then(res => {
      this.blog = res.data;
    })
  }
}
</script>

<style scoped>
.el-container {
  margin: auto;
  max-width: 1600px;
  min-width: 1000px;
}
.detailMain{
  display: flex;
}
.left{
  height: auto;
  width: 70%;
}
.right{
  height: auto;
  width: 30%;
}
.myBreadcrumb{
  margin: 10px 10px 10px 10px;
}
.detail{
  display: flex;
  flex-direction: row;
  font-size: 13px;
}
.time{
  margin-top: 1px;
  font-size: 14px;
  color: #999;
}
.category{
  margin-left: 10px;
}
</style>